﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>达内知道注册</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/plugins/css/vueAlert.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body class="bg-light">

<div class="container-fluid">
    <div class="row">
        <div class="mx-auto mt-5" style="width: 400px">
            <div class="alsrtInfo" style="display: none">
                <div class="profPrompt_test"></div>
            </div>
            <h2 class="text-center"><b>达内</b>·知道</h2>
            <div class="bg-white p-4" id="app">

                <p class="text-center"><b>注册新用户</b></p>

                <div id="error" class="alert alert-danger" style="display: none" :class="{'d-block':hasError}">
                    <i class="fa fa-exclamation-triangle"></i> <span v-text="message">邀请码错误！</span>
                </div>
                <!--@submit.prevent="register",是阻止当前form表单原有的提交效果,只运行register-->
                <form action="/register" method="post" @submit.prevent="register">
                    <div class="form-group has-icon">
                        <input type="text" name="inviteCode" class="form-control" placeholder="请输入邀请码"
                               required="required" v-model="inviteCode">
                        <span class="fa fa-barcode form-control-icon"></span>
                    </div>
                    <div class="form-group has-icon">
                        <input type="tel" name="phone" class="form-control" placeholder="请输入手机号"
                               pattern="^\d{11}$" required="required" v-model="phone">
                        <span class=" fa fa-phone form-control-icon"></span>
                    </div>

                    <div class="form-group has-icon">
                        <input type="text" name="nickname" class="form-control" placeholder="请设置昵称，字数为2-20之间"
                               pattern="^.{2,20}$" required="required" v-model="nickname">
                        <span class="fa fa-user form-control-icon"></span>
                    </div>

                    <div class="form-group has-icon">
                        <input type="password" name="password" class="form-control" placeholder="设置密码6-20个字母、数字、下划线"
                               required="required" pattern="^\w{6,20}$" v-model="password">
                        <span class="fa fa-lock form-control-icon"></span>
                    </div>
                    <div class="form-group has-icon">
                        <input type="password" name="confirm" class="form-control" placeholder="请再次输入密码"
                               required="required" v-model="confirm">
                        <span class="fa fa-lock form-control-icon"></span>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
                </form>

                <a href="login.html" class="text-center d-inline-block mt-3">已有账号，立即登录</a>
            </div>
            <!-- /.form-box -->
        </div>
    </div>
</div>
<script src="js/utils.js"></script>
<script src="js/register.js"></script>
</body>
</html>
